/*
 * @Description: 资讯管理
 * @Author: charles
 * @Date: 2021-11-16 14:16:51
 * @LastEditors: charles
 * @LastEditTime: 2021-11-16 15:40:40
 */
import {Button,Table,Space,Modal,message,Form,Input} from 'antd'
import { ExclamationCircleOutlined } from '@ant-design/icons';

import axios from 'axios'
import {useState,useEffect} from 'react'
import {token} from '../../utils/config'
function Article(props){
  
  const [articleData,setArticleDate] = useState({list:[]});
  const [params,setParams] = useState({page:1,pageSize:5});
  const [loading,setLoading] = useState(false)
  // 组件初始化，组件更新
  useEffect(()=>{
    loadArticleData();
  },[params])   // 监控某个状态的更新，然后执行副作用
  // 1. 查询资讯
  const loadArticleData = ()=>{
    setLoading(true)
    let url = "http://121.199.29.84:8002/article/pageQuery"
    axios.get(url,{
      params,
      headers:{
        Authorization:token
      }
    }).then(resp =>{
      setLoading(false)
      setArticleDate(resp.data.data)
    })
  }
  // 2. 翻页
  const pageChangeHandler = (page)=>{
    // 修改了参数【状态】 -> 组件更新
    setParams({ ...params, page })
  }
  // 3. 跳转到发布页面
  const toPublishHandler = ()=>{
    props.history.push("/articlePublish")
  }
  // 4. 修改
  const editHandler = (row)=>{
    props.history.push({
      pathname:"/articlePublish",
      state:row
    })
  }
  // 5. 删除
  const delHandler = (id)=>{
    Modal.confirm({
      title: 'Do you Want to delete these items?',
      icon: <ExclamationCircleOutlined />,
      content: 'Some descriptions',
      onOk() {
        let url = "http://121.199.29.84:8002/article/deleteById"
        axios.get(url,{
          params:{id},
          headers:{
            Authorization:token
          }
        }).then(resp =>{
          message.success(resp.data.message)
          loadArticleData();
        })
      }
    });
  }
  // 6. 检索
  const searchHandler = (value)=>{
    // 修改params
    setParams({
      ...params,
      ...value
    })
  }

  const columns = [{
    title: '标题',
    dataIndex: 'title',
    key: 'title',
  },{
    title: '发布时间',
    dataIndex: 'publishTime',
    key: 'publishTime',
    align:'center',
    width:160
  },{
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    align:'center',
    width:100
  },{
    title:'操作',
    key:'id',
    width:200,
    align:'center',
    render(row){
      return (
        <Space>
          <Button onClick={()=>{ editHandler(row) }}>修改</Button>
          <Button type="danger" onClick={ ()=>{delHandler(row.id)}}>删除</Button>
        </Space>
      )
    }
  }]
  return (
    <div>
      <h2>文章管理</h2>
      <div style={ {marginBottom:"1em"} }>
        <Form
          style={{justifyContent:"center"}}
          layout="inline"
          name="basic"
          onFinish={searchHandler}
        >
          <Form.Item
            label="标题"
            name="title"
          >
            <Input />
          </Form.Item>
          <Form.Item >
            <Space>
              <Button type="primary" htmlType="submit"> 搜索 </Button>
              <Button onClick={toPublishHandler}>发布资讯</Button>
            </Space>
          </Form.Item>
        </Form>


      </div>
      <Table 
        loading={loading}
        rowKey="id"
        size="small"
        pagination={
          {
            current:articleData.page,
            pageSize:articleData.pageSize,
            total:articleData.total,
            onChange:pageChangeHandler
          }
        }
        columns={columns}
        dataSource={articleData.list}></Table>
    </div>
  )
}
export default Article;
